<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    class SnapshotSandBox {
      windowSnapshot = {};
      modifyPropsMap = {};
      active() {
        for (const prop in window) {
          this.windowSnapshot[prop] = window[prop];
        }
        Object.keys(this.modifyPropsMap).forEach(prop => {
          window[prop] = this.modifyPropsMap[prop];
        });
      }
      inactive() {
        for (const prop in window) {
          if (window[prop] !== this.windowSnapshot[prop]) {
            this.modifyPropsMap[prop] = window[prop];
            window[prop] = this.windowSnapshot[prop];
          }
        }
      }
    }
    // 验证:
    let snapshotSandBox1 = new SnapshotSandBox();
    let snapshotSandBox2 = new SnapshotSandBox()
    snapshotSandBox1.active();
    window.city = 'Beijing';
    console.log("window.city-01:", window.city);
    snapshotSandBox1.inactive();
    snapshotSandBox2.active()
    window.city = 'wuhan'
    console.log(window.city)
    snapshotSandBox2.inactive()
    snapshotSandBox1.active()
    console.log(window.city, '========')
    //输出：
    //window.city-01: Beijing
    //window.city-02: undefined
    //window.city-03: Beijing

  </script>
</body>

</html>